<template>
  <div class="spotlight pages">
    <Top></Top>
    <Nav></Nav>
    <div class="info-list">
      <div class="back-home">
        <BackHome></BackHome>
      </div>
      <div class="content-list" v-loading="positionLoading">
        <template >
          <div class="bottom">
<!--            <div class="top" v-if="noticeList.length>0">-->
<!--              <img :src="noticeList[0].face_url">-->
<!--              <div class="text">-->
<!--                <div class="title">{{ noticeList[0].title }}</div>-->
<!--                <div class="small-title">{{ noticeList[0].description }}</div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="string" v-if="noticeList1.length>0"></div>-->
            <div class="text-item" @click="skip(item.id)" v-for="item in noticeList1" :key="item.id">
              <div class="title">{{ item.title }}</div>
              <div class="time">{{ item.create_time }}</div>
            </div>
          </div>
          <el-empty v-if="noticeList1.length<=0" style="display: flex;justify-content: center;align-items: center;"></el-empty>
        </template>
        <div class="string" v-if="noticeList1.length>0 && count>limit"></div>
        <div  v-if="noticeList1.length>0 && count>limit"  class="paging">
          <el-pagination
              background
              :page-size="limit"
              layout="prev, pager, next"
              prev-text="上一页"
              next-text="下一页"
              :total="count"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="this.page">
          </el-pagination>
          <div style="width: 110px;height: 1px"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Top from '@/components/Top.vue'
import Nav from '@/components/Nav.vue'
import Bottom from '@/components/Bottom.vue'
import BackHome from '@/components/BackHome.vue'
import {
  getCategoryApi,
  getMenuListApi,
  getLeaderListApi,
  getNoticeListApi,
  getNoticeIndexListApi
} from "@/api/spotlight";
export default {
  name: "spotlight",
  data(){
    return{
      title1:'',
      tabActive: 3,
      name:'新闻分类',
      limit: 10,
      page: 1,count: 0,
      id: null,
      tabLoading:false,
      positionLoading:false,
      noticeList1:[],
      noticeList: [
        {
          face_url:'',
          description:'',
          title:''
        }
      ],
    }
  },
  methods:{
    skip(id){
      //this.$router.replace({ name: 'spotlightDetail',query:{id:id} })
      const routeInfo = this.$router.resolve({
        name: 'spotlightDetail', // 路由的名字
        query: { id: id }, // 如果有参数
      });

      // 使用 window.open 打开新的页面
      window.open(routeInfo.href || routeInfo.url); // 兼容不同版本的 Vue Router
    },
    getList() {
      console.log(this.id)
      getNoticeIndexListApi({page:this.page,limit:this.limit,category_id:this.id,}).then((res) => {
        //this.noticeList = res.result;
        this.noticeList1 = res.result;
        this.count = res.result.count
      })
    },
    handleSizeChange(e) {
      this.limit = e
      this.getList()
      //this.getList1()
    },
    // 当前页change
    handleCurrentChange(e) {
      this.page = e
      sessionStorage.setItem('currentPage1',this.page)
      this.getList()
      //this.getList1()
    },
  },
  created() {
    let currentPage=sessionStorage.getItem('currentPage')
    if(currentPage!=null){
      this.tabActive = Number(currentPage)
    }
  },
  updated() {
    let scrollTop = sessionStorage.getItem('scrollTop')
    window.scrollTo({
      top:scrollTop,
      behavior: 'instant'
    })
    sessionStorage.setItem('scrollTop',0);
  },
  components:{
    Top,
    Nav,
    Bottom,
    BackHome
  },
  mounted() {
    this.utils.createParams(this, this.$route.query);
    this.getList()
    //this.getList1()
  }
}
</script>

<style scoped lang="scss">
.content-list{
  width: 900px;
  padding: 25px;
  border: 1px solid #E8E8E8;
  ::v-deep{
    .el-pagination.is-background .el-pager li:not(.disabled).active{
      background-color: #CD1738;
    }
  }
  .top{
    display: flex;
    box-sizing: border-box;
    img{
      //width: 360px;
      height: 220px;
    }
    .text{
      padding: 0 30px;
      .title{
        font-weight: 900;
      }
      .small-title{
        color: #8f8a8a;
        margin-top: 25px;
      }
    }
  }
  .bottom{
    width: 100%;
    .text-item{
      display: flex;
      justify-content: space-between;
      height: 48px;
      line-height: 48px;
      overflow: hidden;
      cursor: pointer;
      .title{
        width: 700px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .text-item:hover{
      color: #CD1738;
    }
  }
  .string{
    width: 100%;
    height: 1px;
    background-color: #E8E8E8;
    margin: 20px 0;
  }

  .info-block{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .info-item:nth-child(4n){
      margin-right: 0;
    }
    .info-item{
      width: calc((100% - 60px)/4);
      margin-right: 20px;
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .face-img{
        width: 120px;
        height: 160px;
        border-radius: 3px;
      }
      .info-name{
        margin-top: 10px;
      }
    }
  }
}
.content-nav{
  width: 100%;
  height: 50px;
  background: linear-gradient(to right, #FF5C61 30%, #FF5C61 60%, #FF5B5C 90%);
  a{
    text-decoration: none;
    color: #FFF;
  }
  .router-link-active {
    text-decoration: none;
    color: #FBBDBF;

  }

  .center-content{
    width: 1220px;
    height: 50px;
    margin: 0 auto;
    display: flex;
    .nav{
      width: calc((100% - 20px));
      height: 100%;
      display:flex;
      .tab-item{
        width: 98px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        color: #FFF;
        cursor: pointer;
        z-index:999
      }
      .tab-item.active{
        color: #FBBDBF;
        z-index:999
      }
      a{
        text-decoration: none;
        color: #FFF;
      }
      .router-link-active {
        text-decoration: none;
        color: #FBBDBF;
      }
    }
    .search{
      position: relative;
      input{
        box-sizing: border-box;
        height: 40px;
        background-color: hsla(222, 108, 210, 0.3);
        margin-top: 5px;
        font-size: 15px;
        //margin-right: 30px;
        padding-right: 35px;
      }
      img{
        position: absolute;
        width: 30px;
        height: 30px;
        right: 3px;
        top: 10px;
      }
    }
  }
}
.spotlight{
  position: relative;
  a{
    text-decoration: none;
    color: #000000;
  }
  /*设置点击后的样式 */
  .router-link-active {
    text-decoration: none;
  }
  .info-list{
    width: 1100px;
    margin: 50px auto 0;
    min-height: 500px;
    display: flex;
    .back-home{
      position: fixed;
      right: 0;
    }
    .tab{
      margin: 20px 50px 0 0;
      cursor: pointer;
      .tab-item{
        width: 150px;
        height: 40px;
        line-height: 40px;
        border-radius: 20px;
        text-align: center;
        border: 1px solid #CD1738;
        background-color: #FFFFFF;
        margin: 20px 0;
      }
      .tab-item.active{
        color: #F7F7F7;
        background-color: #CD1738;
      }
    }
  }

}
</style>
